var React  = require('react');

var VoaHead = require("./VoaHead.js");
var VoaLeft  = require("./VoaLeft.js");

var VoaMain  = require("./VoaMain.js");

var Collection =require("../collection/Collection.js");

var FetchData = require("../util/FetchData.js");

var $ = require("jquery");

var VoaModel = require("../model/VoaModel.js")


module.exports = React.createClass({

 getInitialState:function(){


      return {

        collection: this.props.collection,
        model:{},
        isLoading: false,
        
      }

   },


  detailList:function(href){
      
     

			 var collection  =new Collection();

         collection.url=href;

        var promise= new FetchData().fetchData(collection);
         var self = this;
         this.setState({isLoading:true,model:{}});
          $.when(promise).done(function(data){
          	    if(data!==undefined){
                    console.dir(data);
          	    	self.setState({
                    collection:data,
                    isLoading:false
                  });

          	    }


            });

	},
	
	details:function(href){
	    
	    var model = new VoaModel();
	    console.log(href);
	    
	    model.url=href;
	    
	    
        var promise= new FetchData().fetchData(model);
         var self = this;
         
         
          this.setState({isLoading:true,collection:{}});
          $.when(promise).done(function(data){
          	    if(data!==undefined){

          	    	self.setState({
                    model:data,
                    isLoading:false
                  });

          	    }


            });
	    
	    
	},


	render: function(){

	  
	  
	    

		return (
             <div>

				<div data-role="page">
      					 <VoaHead />

					    <div id="main" className="container-fluid" data-role="content">
					    	
					    	<div>
                        	<div className="container" style={{"marginTop":"70px"}} id="mainbody">
                      		<VoaLeft detailList={this.detailList}/>
                                     
					           <VoaMain  collection ={this.state.collection}  isLoading={this.state.isLoading}  details={this.details} model={this.state.model}  detailList={this.detailList}/>
					        </div>
					        </div>
					  </div>
					<div className="container">
					    <hr/>
					 </div>

                <footer data-role="footer" className="container">
                    <p style={{"marginLeft":"20px"}}>
                        @kenny 2015
                    </p>
                </footer>

           </div>

</div>

		)


	}

});